import React = require('react');
import { PageProps } from 'maishu-chitu-react';
import { WeiXinService } from 'services/weixin';
import * as ui from "maishu-ui-toolkit";
import { SpinerState, SpinerComponent } from 'controls/spiner-component';

const label_max_width = 120;
const input_max_width = 300;

interface Props extends PageProps {
    setting: WeiXinSetting
}

interface State extends SpinerState {
    setting: WeiXinSetting
}

export default class SettingPage extends SpinerComponent<Props, State>{

    weixin: WeiXinService;
    constructor(props) {
        super(props);
        this.state = { setting: this.props.setting };
        this.weixin = this.props.createService(WeiXinService);
    }
    async loadData(): Promise<Partial<State>> {
        let setting = await this.weixin.getSetting();
        return { setting }
    }
    save() {
        return this.weixin.saveSetting(this.state.setting);
    }
    render() {
        let setting = this.state.setting;
        return <>
            <ul key={10} className="nav nav-tabs">
                <li className="pull-right">
                    <button className="btn btn-primary btn-sm"
                        ref={(e: HTMLButtonElement) => {
                            if (!e) return;
                            ui.buttonOnClick(e, () => this.save(), { toast: "保存成功" });
                        }}>
                        <i className="icon-save" />
                        <span>保存</span>
                    </button>
                </li>
            </ul>
            <div key={20} className="well">
                <div className="row form-group">
                    <div className="col-md-12">
                        <h5>公众号设置</h5>
                    </div>
                </div>
                <div className="row form-group">
                    <label className="col-md-4" style={{ width: label_max_width }}>
                        AppId
                    </label>
                    <div className="col-md-8" style={{ maxWidth: input_max_width }}>
                        <input name="AppId" className="form-control" value={setting.AppId || ''}
                            onChange={(e) => {
                                setting.AppId = (e.target as HTMLInputElement).value;
                                this.setState(this.state);
                            }} />
                    </div>
                </div>
                <div className="row form-group">
                    <label className="col-md-4" style={{ width: label_max_width }}>
                        AppSecret
                    </label>
                    <div className="col-md-8" style={{ maxWidth: input_max_width }}>
                        <input name="AppSecret" className="form-control" value={setting.AppSecret || ''}
                            onChange={(e) => {
                                setting.AppSecret = (e.target as HTMLInputElement).value;
                                this.setState(this.state);
                            }} />
                    </div>
                </div>
                <div className="row form-group">
                    <div className="col-md-12">
                        <h5>微支付设置</h5>
                    </div>
                </div>
                <div className="row form-group">
                    <label className="col-md-4" style={{ width: label_max_width }}>
                        PartnerId
                    </label>
                    <div className="col-md-8" style={{ maxWidth: input_max_width }}>
                        <input name="PartnerId" className="form-control" value={setting.PartnerId || ''}
                            onChange={(e) => {
                                setting.PartnerId = (e.target as HTMLInputElement).value;
                                this.setState(this.state);
                            }} />
                    </div>
                </div>
                <div className="row form-group">
                    <label className="col-md-4" style={{ width: label_max_width }}>
                        PartnerKey
                    </label>
                    <div className="col-md-8" style={{ maxWidth: input_max_width }}>
                        <input name="PartnerKey" className="form-control" value={setting.PartnerKey || ''}
                            onChange={(e) => {
                                setting.PartnerKey = (e.target as HTMLInputElement).value;
                                this.setState(this.state);
                            }} />
                    </div>
                </div>
            </div>
        </>
    }
}

// let setting = await weixin.getSetting();
// ReactDOM.render(<SettingPage setting={setting} />, page.element)